<!--
 * @Author: huangtianyang 916072572@qq.com
 * @Date: 2023-11-22 16:19:19
 * @LastEditors: huangtianyang
 * @LastEditTime: 2024-05-09 16:16:49
 * @FilePath: \cxl-driving-training\src\views\mini\FAQ\Index.vue
-->
<template>
    <div class="page-box">
        <TemplateVue
            :page="data.pageData"
            @search="data.onSearch"
            @reset="data.onReset"
            @paginationChange="data.onPaginationChange"
            @paginationSize="data.onPaginationSize"
            @operation="data.onOperation"
        >
        </TemplateVue>
        <BasicDialogVue :data="data.dialog" @close="data.onCloseDialog(dialogForm)">
            <template #content>
                <el-form ref="dialogForm" :model="data.dialogForm" label-width="100px" :rules="data.rules">
                    <el-form-item label="问题：" prop="title">
                        <el-input v-model="data.dialogForm.title"></el-input>
                    </el-form-item>
                    <el-form-item label="内容：" prop="content">
                        <el-input v-model="data.dialogForm.content" type="textarea" rows="6" show-word-limit></el-input>
                    </el-form-item>
                </el-form>
                <div class="btn">
                    <el-button @click="data.onCloseDialog(dialogForm)">取消</el-button>
                    <el-button type="primary" @click="data.submitForm(dialogForm)">确定</el-button>
                </div>
            </template>
        </BasicDialogVue>
    </div>
</template>
<script setup lang="ts">
import TemplateVue from '@/components/template/Index.vue'
import BasicDialogVue from '@/components/baseDialog/Index.vue'
import IssueData from './index'
import { reactive, ref } from 'vue'
const dialogForm = ref()

const data = reactive(new IssueData())
</script>

<style scoped lang="scss">
.btn {
    display: flex;
    justify-content: center;
    margin: 20px 0 0 0;
}
.title {
    font-size: 14px;
    margin-bottom: 16px;
    font-weight: 600;
}
</style>
